<template>
	<div class="monitorDispatchList" v-loading="monitorDispatchListLoading">
		<div class="title">调度列表</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="车辆编号">
          <el-select v-model="searchForm.vehicleNo" placeholder="请选择车辆编号" clearable>
            <el-option v-for="item of vehicleNumList" :key="item.id" :label="item.name" :value="item.name" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 15px;">
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="monitorList.data" border size="mini"
        style="width: 100%" :header-cell-style="{color: '#666'}"
      > 
        
        <el-table-column
          prop="gmtDispatch"
          label="调度时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          label="调度地址"
          align="center">
        </el-table-column>
        <el-table-column
          prop="publisher"
          label="调度人姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="publisherPhone"
          label="调度人联系方式"
          align="center">
        </el-table-column>
        <el-table-column
          label="调度车辆信息"
          width="120px"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="openDetailDialog(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="提交时间"
          align="center">
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="monitorList.total"></myPaging>
    <el-dialog width="70%" :visible.sync="detailFormVisible" append-to-body>
      <div slot="title">
        <p>调度车辆信息</p>
      </div>
      <el-table :data="carDetail" size="mini" border
        style="width: 100%" :header-cell-style="{color: '#666'}"
      > 
        <!-- <el-table-column
          prop="key"
          label="类型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="value"
          label="内容"
          align="center">
        </el-table-column> -->
        <el-table-column
          prop="vehicleId"
          label="调度车辆编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="vehicleNo"
          label="调度车辆车牌"
          align="center">
        </el-table-column>
        <el-table-column
          prop="vehiclePerson"
          label="车辆驾驶员"
          align="center">
        </el-table-column>
        <el-table-column
          prop="vehiclePhone"
          label="驾驶人电话"
          align="center">
        </el-table-column>
      </el-table>
    </el-dialog>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import myPaging from '@/components/myPaging.vue'
export default {
  name: 'monitorDispatchList',
  data () {
    return {
      msg: 'hello monitorDispatchList!',
      monitorDispatchListLoading: false,
      receUserLoading: false,
      searchForm: {
        vehicleNo: '',
      },

      detailFormVisible: false,
      table: [
        {
          time: "2017-06-12 14:00:00",
          person: "代璐",
          phone1: "13045887789",
          address: "深圳市宝安区巴拉巴拉街道",
          createTime: "2017-06-12 14:00:00",
          vehicleId: "ve123",
          vehicleNo: "粤B123456",
          personName: "代璐2",
          phone2: "13045887789",
        },
        {
          time: "2017-06-12 14:00:00",
          person: "代璐",
          phone1: "13045887789",
          address: "深圳市宝安区巴拉巴拉街道",
          createTime: "2017-06-12 14:00:00",
          vehicleId: "ve123",
          vehicleNo: "粤B123456",
          personName: "代璐2",
          phone2: "13045887789",
        },
        {
          time: "2017-06-12 14:00:00",
          person: "代璐",
          phone1: "13045887789",
          address: "深圳市宝安区巴拉巴拉街道",
          createTime: "2017-06-12 14:00:00",
          vehicleId: "ve123",
          vehicleNo: "粤B123456",
          personName: "代璐2",
          phone2: "13045887789",
        },
      ],
      carDetail: []

		}
  },
	methods: {
    ...mapActions([
      'fetchMonitorDispatchList',
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.monitorDispatchListLoading = true
      await this.fetchMonitorDispatchList({...this.searchForm, ...pageOption})
      this.monitorDispatchListLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    openDetailDialog(row) {
      this.carDetail = [row]
      this.detailFormVisible = true
    }
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      vehicleNumList: 'getVehicleNumList',

      monitorList: 'getMonitorList',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.monitorDispatchList {
  background: #fff;
  padding: 0 20px 0 20px;
  min-height: 100%;
}
.monitorDispatchList .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.monitorDispatchList .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}
.monitorDispatchList .imgItem {
  max-width: 200px;
  margin-right: 15px;
}
</style>
<style>
.dispatchList .el-form-item__label {
  font-weight: bold;
}
.dispatchList .el-form-item {
  margin-right: 22px;
}
</style>
